<template>
    <!--权限设置-->
    <div class="permissions-setting">
        <div class="content">
            <el-row class="content-header">
                <el-col :span="16" style="margin-top: 50px">
                    <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm" >
                        <el-form-item label="角色名称" prop="name">
                            <el-input v-model="ruleForm.name" placeholder="请输入角色名称"></el-input>
                        </el-form-item>
                        <el-form-item style="text-align: right">
                            <el-button type="primary" @click="changeForm('ruleForm')" v-if="this.$route.params.id">确定修改</el-button>
                            <el-button type="primary" @click="submitForm('ruleForm')" v-else>立即创建</el-button>
                            <el-button type="primary" @click="$router.go(-1)" >返回</el-button>
                        </el-form-item>
                    </el-form>
                </el-col>
            </el-row>
            <div class="content-list">
                <div class="content-list-left">
                    <div class="title">菜单权限</div>
                    <el-tree
                            :data="baseOption"
                            show-checkbox
                            node-key="id"
                            ref="tree"
                            :default-expanded-keys="[]"
                            :default-checked-keys="selectTree"
                            :props="defaultProps">
                    </el-tree>
                </div>
                <div class="content-list-right">
                    <div class="title">其他权限</div>
                    <el-tabs v-model="selectPermisson" type="card" @tab-click="handleClick">
                        <!--<el-tab-pane label="资源权限" name="1"></el-tab-pane>-->
                        <el-tab-pane label="范围权限" name="2"></el-tab-pane>
                    </el-tabs>
                    <!--<div class="right-content" v-if="selectPermisson === '1'">-->
                        <!--&lt;!&ndash;<pre>{{transOption}}</pre>&ndash;&gt;-->
                    <!--</div>-->
                    <div class="right-content" v-if="selectPermisson === '2'">
                        <div v-for="(item1,index) in scopePermissionOption" :key="index">
                            <div>
                                <div>{{index+1}}、{{item1.name}}</div>
                                <div style="padding:10px 0 10px 30px">
                                    <el-checkbox-group v-model="scopePermission">
                                        <el-checkbox :label="item2.id" v-for="item2 in item1.content" :key="item2.id" v-if=" item2.site == '0' || cityId == item2.site" style="width: 154px;margin-left: 0px;margin-bottom: 5px">{{item2.name}}</el-checkbox>
                                    </el-checkbox-group>
                                </div>

                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        name: "index",
        props: {},
        components: {
        },
        data() {
            return {
                ruleForm: {
                    name: ''
                },
                rules: {
                    name: [
                        {required: true, message: '请输入角色名称', trigger: 'blur'}
                    ]
                },
                defaultProps: {
                    children: 'child',
                    label: 'name'
                },
                selectTree: [],  // 默认选中的值
                selectPermisson: '2',
                baseOption: [],  // 权限基础数据
                scopePermissionOption: [],  // 范围权限基础数据
                scopePermission: [], // 单角色范围权限数据
                cityId: null  // 单角色范围权限数据
            }
        },
        mounted() {
            this.cityId = localStorage.getItem('cityId');
            this.getScopePermission();
            this.getBaseData();
        },
        methods: {
            submitForm(formName) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        this.setQuanXian();
                    } else {
                        return false;
                    }
                });
            },
            changeForm(formName) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        this.setQuanXian('change');
                    } else {
                        return false;
                    }
                });
            },
            getNowUserTree(id) {
                this.$http.get('auth/role/' + id)
                    .then((response) => {
                        this.ruleForm.name = response.data.data.name;
                        this.selectTree = response.data.data.child_nav;
                        response.data.data.scopes.forEach(item => {
                            this.scopePermission.push(item.id);
                        });
                    })
                    .catch((error) => {
                        if (error.response.data.msg) {
                            this.$message.error(error.response.data.msg);
                        } else {
                            this.$message.error('请求错误：' + error.response.status);
                        }
                    });
            },
            setQuanXian(val) {
                if (val == 'change') {
                    let params = {
                        name: this.ruleForm.name,
                        status: 1,
                        scopes: this.scopePermission,
                        tree_nav: this.$refs.tree.getCheckedKeys()
                    };
                    console.info(params.tree_nav);
                    this.$http.put('auth/role/' + this.$route.params.id, params)
                        .then((response) => {
                            this.$message.success('修改成功！');
                            this.$router.replace({path:'/curd/auth.role'});
                        })
                        .catch((error) => {
                            if (error.response.data.msg) {
                                this.$message.error(error.response.data.msg);
                            } else {
                                this.$message.error('请求错误：' + error.response.status);
                            }
                        });
                } else {
                    let params = {
                        name: this.ruleForm.name,
                        status: 1,
                        scopes: this.scopePermission,
                        tree_nav: this.$refs.tree.getCheckedKeys()
                    };
                    this.$http.post('auth/role', params)
                        .then((response) => {
                            this.$message.success('添加成功！');
                            this.$router.replace({path:'/curd/auth.role'});
                        })
                        .catch((error) => {
                            if (error.response.data.msg) {
                                this.$message.error(error.response.data.msg);
                            } else {
                                this.$message.error('请求错误：' + error.response.status);
                            }
                        });
                }

            },  // 设置角色权限
            getBaseData() {
                this.$http.get('admin/nav/tree')
                    .then((response) => {
                        this.baseOption = response.data.data;
                        if (this.$route.params.id) {
                            this.getNowUserTree(this.$route.params.id);
                        } else {
                            for (let key in this.baseOption) {
                                this.selectTree.push(this.baseOption[key].id);
                                if (this.baseOption[key].child) {
                                    for (let index in this.baseOption[key].child) {
                                        this.selectTree.push(this.baseOption[key].child[index].id);
                                    }
                                }
                            }
                        }

                    })
                    .catch((error) => {
                        if (error.response.data.msg) {
                            this.$message.error(error.response.data.msg);
                        } else {
                            this.$message.error('请求错误：' + error.response.status);
                        }
                    });
            },
            getScopePermission() {
                this.$http.get('auth/scope')
                    .then((response) => {
                        this.scopePermissionOption = response.data.data;
                    })
                    .catch((error) => {
                        if (error.response.data.msg) {
                            this.$message.error(error.response.data.msg);
                        } else {
                            this.$message.error('请求错误：' + error.response.status);
                        }
                    });
            },
            handleClick(tab, event) {
                console.log(tab, event);
            }
        }
    }
</script>
<style lang="less">
    .permissions-setting{
        .el-tabs--card>.el-tabs__header .el-tabs__nav{
            margin-left: 46px !important;
        }
        .el-tabs__item.is-active{
            color: #009688 !important;
        }
    }

</style>
<style scoped lang="less">
.permissions-setting{
    padding: 10px;
    .content{
        /*height: 80vh;*/
        display: flex;
        flex-direction: column;
        .content-header{
            width: 100%;
            height: 200px;
            background: #fff;
            margin-bottom: 10px;
            min-width: 710px;
        }
        .content-list{
            flex: 1;
            display: flex;
            .title{
                line-height: 43px;
                font-size: 16px;
                border-bottom: 1px solid #eee;
                padding-left: 26px;
                margin-bottom: 30px;
            }
            .content-list-left{
                width: 20%;
                min-width: 220px;
                background-color: #fff;
            }
            .content-list-right{
                margin-left: 10px;
                display: flex;
                flex-direction: column;
                flex: 1;
                min-width: 500px;
                background-color: #fff;
                .right-content{
                    box-sizing: border-box;
                    width: 100%;
                    padding: 20px 50px;
                    flex: 1;
                }
            }
        }
    }
}
</style>
